<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="订单详情" closable>
            <n-spin :show="loading">
                <n-space vertical :size="32" v-if="order.id">
                    <n-descriptions label-placement="left" title="基本信息" bordered :column="3">
                        <n-descriptions-item :label-style="labelStyle" label="订单编号">
                            <n-text code>D{{ order.id }}</n-text>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="订单状态">
                            <n-tag :bordered="false" size="small" type="error" v-if="order.state == 1">等待支付</n-tag>
                            <n-tag :bordered="false" size="small" type="warning" v-if="order.state == 2">等待服务</n-tag>
                            <n-tag :bordered="false" size="small" type="success" v-if="order.state == 3">租赁中</n-tag>
                            <n-tag :bordered="false" size="small" type="info" v-if="order.state == 4">已完成交车</n-tag>
                            <n-tag :bordered="false" size="small" v-if="order.state == 9">订单取消</n-tag>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="出租门店">
                            <n-text code>S{{ order.merchant.id }}</n-text>
                            {{ order.merchant.name }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="承租人">
                            <n-text code>{{ order.customer.phone }}</n-text>
                            {{ order.customer.name }}
                        </n-descriptions-item>

                        <n-descriptions-item :span="2" :label-style="labelStyle" label="租期时间">{{ order.begin }} 至 {{ order.close }}</n-descriptions-item>

                        <n-descriptions-item :label-style="labelStyle" label="出租人/店">
                            <span v-if="order.agency.clerk">{{ order.agency.clerk.name }} / {{ order.agency.merchant.name }}，佣金：{{ Filters.money(order.agency.total) }}</span>
                            <span v-else>门店订单，无中介方</span>
                        </n-descriptions-item>
                        <!-- <n-descriptions-item :span="2" :label-style="labelStyle" label="租金信息">
                            租金：{{ Filters.money(order.rent.total) }} / 押金：{{ Filters.money(order.deposit.total) }} / 日租：{{ Filters.money(order.rent.day) }} / 服务：{{ Filters.money(order.rent.srvs) }}
                        </n-descriptions-item> -->
                        <n-descriptions-item :span="2" :label-style="labelStyle" label="租金信息">
                            租金：{{ Filters.money(order.rent.total) }} ({{order.unitPrice}} x {{ order.days }}天) / 押金：{{ Filters.money(order.deposit.total) }} / 服务：{{ Filters.money(order.rent.srvs) }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="相关时间" :span="3">
                            <n-space>
                                <span v-if="order.times.create">下单：{{ order.times.create }}</span>
                                <span v-if="order.times.paid">付款：{{ order.times.paid }}</span>
                                <span v-if="order.times.delivery">交车：{{ order.times.delivery }}</span>
                                <span v-if="order.times.finish">还车：{{ order.times.finish }}</span>
                                <span v-if="order.times.cancel">取消：{{ order.times.cancel }}</span>
                            </n-space>
                        </n-descriptions-item>
                    </n-descriptions>
                    <n-descriptions label-placement="left" title="承租人信息" bordered :column="3">
                        <n-descriptions-item :label-style="labelStyle" label="客户名称">
                            {{ order.customer.name }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="客户电话">
                            {{ order.customer.phone }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="身份证号">
                            {{ order.customer.sno }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="客户类型">
                            {{ order.customer.type == 2 ? '门店客户' : '终端客户' }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="2" :label-style="labelStyle" label="客户地址">
                            {{ order.customer.addr }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="客户证件">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3">
                                    <n-card title="客户身份证" size="small">
                                        <n-image width="200" height="140" :src="order.picker.idc.pica" />
                                    </n-card>
                                </n-gi>
                                <n-gi :span="3">
                                    <n-card title="客户身份证" size="small">
                                        <n-image width="200" height="140" :src="order.picker.idc.picb" />
                                    </n-card>
                                </n-gi>
                                <n-gi :span="3">
                                    <n-card title="取车人驾驶证" size="small">
                                        <n-image width="200" height="140" :src="order.picker.dlc.pica" />
                                    </n-card>
                                </n-gi>
                                <n-gi :span="3">
                                    <n-card title="取车人驾驶证" size="small">
                                        <n-image width="200" height="140" :src="order.picker.dlc.picb" />
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="交车信息" bordered :column="3" v-if="order.delivery.time">
                        <n-descriptions-item :label-style="labelStyle" label="交车人员">
                            {{ order.delivery.clerk.name }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="2" :label-style="labelStyle" label="交车地址">
                            {{ order.addr }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="交车数据">
                            <n-space>
                                <span>燃料：{{ order.delivery.fuel }} / 8</span>
                                <span>里程：{{ order.delivery.mile }} KM</span>
                                <span>物品：{{ order.delivery.thing }}</span>
                            </n-space>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="验车图片">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.delivery.photo">
                                    <n-card size="small">
                                        <n-image width="200" height="200" object-fit="cover" :src="p" />
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="验车视频">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.delivery.video">
                                    <n-card size="small">
                                        <video width="200" height="200" controls>
                                            <source :src="p" type="video/mp4" />
                                            <source :src="p" type="video/ogg" />
                                            <source :src="p" type="video/webm" />
                                            <object :data="p" width="200" height="200">
                                                <embed :src="p" width="200" height="200" />
                                            </object>
                                        </video>
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="划痕细节图">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.delivery.detail">
                                    <n-card size="small">
                                        <n-image width="200" height="200" object-fit="cover" :src="p" />
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                    </n-descriptions>
                    <n-descriptions label-placement="left" title="还车信息" bordered :column="3" v-if="order.restore.time">
                        <n-descriptions-item :label-style="labelStyle" label="还车人员">
                            {{ order.restore.clerk.name }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="2" :label-style="labelStyle" label="还车地址">
                            {{ order.remote.addr || order.addr }}
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="还车数据">
                            <n-space>
                                <span>燃料：{{ order.restore.fuel }} / 8</span>
                                <span>里程：{{ order.restore.mile }} KM</span>
                                <span>物品：{{ order.restore.thing }}</span>
                            </n-space>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="验车图片">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.restore.photo">
                                    <n-card size="small">
                                        <n-image width="200" height="200" object-fit="cover" :src="p" />
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="验车视频">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.restore.video">
                                    <n-card size="small">
                                        <video width="200" height="200" controls>
                                            <source :src="p" type="video/mp4" />
                                            <source :src="p" type="video/ogg" />
                                            <source :src="p" type="video/webm" />
                                            <object :data="p" width="200" height="200">
                                                <embed :src="p" width="200" height="200" />
                                            </object>
                                        </video>
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                        <n-descriptions-item :span="3" :label-style="labelStyle" label="划痕细节图">
                            <n-grid :cols="12" :x-gap="12" :y-gap="12">
                                <n-gi :span="3" v-for="p in order.restore.detail">
                                    <n-card size="small">
                                        <n-image width="200" height="200" object-fit="cover" :src="p" />
                                    </n-card>
                                </n-gi>
                            </n-grid>
                        </n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="押金信息" bordered :column="3">
                        <n-descriptions-item :label-style="labelStyle" label="押金金额">
                            {{ Filters.money(order.deposit.total) }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="已解押">
                            {{ Filters.money(order.deposit.refund) }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="已扣除">
                            {{ Filters.money(order.deposit.fine) }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="押金类型">
                            <span v-if="order.deposit.type == 1">在线支付</span>
                            <span v-if="order.deposit.type == 2">微信免押</span>
                            <span v-if="order.deposit.type == 3">芝麻免押</span>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="押金状态" :span="2">
                            <n-space>
                                <span v-if="order.deposit.type == 4 ">免付</span>
                                <span v-else-if="order.deposit.full">已全部解押</span>
                                <span v-else-if="order.deposit.part">{{ Filters.money(order.deposit.total - order.deposit.refund) }} 转违章</span>
                                <span v-else-if="!order.deposit.paid">未支付</span>
                                <span v-else>冻结中</span>
                            </n-space>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="转违章时间">
                            {{ order.deposit.part }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="解押时间">
                            {{ order.deposit.full }}
                        </n-descriptions-item>
                    </n-descriptions>
                    <n-descriptions label-placement="left" title="合同信息" bordered :column="3" v-if="order.contract.id">
                        <n-descriptions-item :label-style="labelStyle" label="合同名称" :span="3">
                            <n-space>
                                <n-text code>{{ order.contract.id }}</n-text>
                                <span>{{ order.contract.title }}</span>
                                <span>{{ order.contract.signed ? '已签署' : '未签署' }}</span>
                                <span v-if="order.contract.time">签署时间：{{ order.contract.time }}</span>
                                <button v-if="order.contract.view" @click="viewContract">查看合同</button>
                            </n-space>
                        </n-descriptions-item>

                        <n-descriptions-item :label-style="labelStyle" label="甲方" :span="2">{{ order.contract.mch.full }} / {{ order.contract.mch.osno }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="签署状态">
                            <span v-if="order.contract.mch.state == 1">等待签署</span>
                            <span v-if="order.contract.mch.state == 2">签署成功</span>
                            <span v-if="order.contract.mch.state == 3">已拒签</span>
                            <span v-if="order.contract.mch.state == 4">签署失败</span>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="乙方" :span="2">
                            {{ order.contract.customer.name }} / {{ order.contract.customer.mob }} / {{ order.contract.customer.idno }}
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="签署状态">
                            <span v-if="order.contract.customer.state == 1">等待签署</span>
                            <span v-if="order.contract.customer.state == 2">签署成功</span>
                            <span v-if="order.contract.customer.state == 3">已拒签</span>
                            <span v-if="order.contract.customer.state == 4">签署失败</span>
                        </n-descriptions-item>
                    </n-descriptions>

                    <n-card size="small" title="账单列表" v-if="order.bills.length > 0">
                        <n-table :single-line="false">
                            <thead>
                                <tr>
                                    <th>账单名称</th>
                                    <th>账单说明</th>
                                    <th>账单费用</th>
                                    <th>是否支付</th>
                                    <th>支付方式</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="sitem in order.bills">
                                    <td>{{ sitem.name }}</td>
                                    <td>{{ sitem.memo }}</td>
                                    <td>{{ sitem.amount }}</td>
                                    <td>{{ sitem.paid ? '已支付' : '等待支付' }}</td>
                                    <td>{{ getPayType(sitem.paymentChannel) }}</td>
                                </tr>
                            </tbody>
                        </n-table>
                    </n-card>

                    <n-card size="small" title="费用明细" v-if="order.newBills.length > 0">
                        <n-table :single-line="false">
                            <thead>
                                <tr>
                                    <th>费用名称</th>
                                    <th>费用说明</th>
                                    <th>费用</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="sitem in order.newBills">
                                    <td>{{ sitem.name }}</td>
                                    <td>{{ sitem.memo }}</td>
                                    <td v-if="sitem.days && sitem.avgPrice">{{ sitem.days }}天 × {{ sitem.avgPrice }} = {{ sitem.amount }}</td>
                                    <td v-else>{{ sitem.amount }}</td>
                                </tr>
                            </tbody>
                        </n-table>
                    </n-card>

                    <n-card size="small" title="增值服务" v-if="order.service.length > 0">
                        <n-table :single-line="false">
                            <thead>
                                <tr>
                                    <th>服务名称</th>
                                    <th>服务说明</th>
                                    <th>服务费用</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="sitem in order.service">
                                    <td>{{ sitem.name }}</td>
                                    <td>{{ sitem.memo }}</td>
                                    <td>{{ sitem.count }}{{ sitem.unit }} × {{ sitem.price }} = {{ sitem.total }}</td>
                                </tr>
                            </tbody>
                        </n-table>
                    </n-card>

                    <n-card size="small" title="订单日志" v-if="order.logs.length > 0">
                        <n-table :single-line="false">
                            <thead>
                                <tr>
                                    <th>操作时间</th>
                                    <th>操作内容</th>
                                    <th>操作人</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="log in order.logs">
                                    <td>{{ log.time }}</td>
                                    <td>{{ log.memo }}</td>
                                    <td>{{ log.name }}</td>
                                </tr>
                            </tbody>
                        </n-table>
                    </n-card>
                </n-space>
            </n-spin>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { CloseRound } from '@vicons/material'
import { useStore } from '@/store'
import { Http } from '@/libs'
import { Filters } from '@/libs'

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 1300))
const loading = computed(() => store.state.loading.flag)

const labelStyle = {
    width: '120px',
}

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const order = ref<any>({})

const execLoad = () => {
    Http.post('/ops/biz/order/detail', { id: prop.item.id }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        order.value = resp.data

        const newBills:any[] = []
        if(resp.data.bills && Array.isArray(resp.data.bills)){
          resp.data.bills.forEach((bill:any)=>{
            const findNewBillIndex = newBills.findIndex(nBill=>nBill.type === bill.type)
            if(findNewBillIndex > -1){
              const billItem = newBills[findNewBillIndex]
              if(billItem.begin && billItem.close){
                billItem.begin = billItem.begin > bill.begin ? bill.begin : billItem.begin
                billItem.close = billItem.close < bill.close ? bill.close : billItem.close
              }
              newBills[findNewBillIndex].amount = Number(billItem.amount) + Number(bill.amount)
              if(bill.originalAmount){
                newBills[findNewBillIndex].originalAmounttotal = Number(newBills[findNewBillIndex].originalAmounttotal || 0) + Number(bill.originalAmount / 100)
              }else{
                newBills[findNewBillIndex].originalAmounttotal = Number(newBills[findNewBillIndex].originalAmounttotal) + Number(bill.amount)
              }
            }else{
              newBills.push({
                ...bill,
                originalAmounttotal: 
                bill.originalAmount ? Number(bill.originalAmount / 100) : Number(bill.amount)
              })
            }
          })
        }
        newBills.forEach(item=>{
          if(item.begin && item.close){
            // 计算出天数
            const begin = new Date(item.begin)
            const close = new Date(item.close)
            const days = (close.getTime() - begin.getTime()) / (1000 * 60 * 60 * 24)
            item.days = Math.ceil(days)
            // 平均每天的金额
            item.avgPrice = (item.amount / item.days).toFixed(2)
          }
        })
        order.value.newBills = newBills
        console.log('order', order.value)
        if(order.value.begin && order.value.close){
          const begin = new Date(order.value.begin)
          const close = new Date(order.value.close)
          const days = (close.getTime() - begin.getTime()) / (1000 * 60 * 60 * 24)
          order.value.days = Math.ceil(days)
          order.value.unitPrice = (Number(Filters.money(order.value.rent.total)) / order.value.days).toFixed(2)
          console.log('order', order.value)
        }
    })
}

const viewContract = () => {
    if (!order.value.contract.view) {
        return
    }
    window.open(order.value.contract.view, '_blank')
}

const getPayType = (type: number)=>{
    switch(type){
      case 10:
        return '钱包支付'
      case 20:
        return '微信扫码'
      case 21:
        return '微信小程序支付'
      case 22:
        return '微信APP支付'
      case 23:
        return '微信信用分'
      case 30:
        return '支付宝扫码'
      case 31:
        return '支付宝小程序'
      case 32:
        return '支付宝APP支付'
      case 33:
        return '支付宝预授权支付'
      case 40:
        return '跳过支付'
      default:
        return ''
    }
  }

onMounted(() => {
    execLoad()
})
</script>
